Step 1 of 3: Setting up the Tiles Application

In this step you'll begin in Visual Studio to create an application using Tiles for WPF and Silverlight. In this step you'll create an application and add a C1TileListBox to contain the C1Tiles controls. To begin, complete the following steps:

In Visual Studio, select File | New | Project.
In the New Project dialog box, expand a language in the left pane, under the language select Windows, and in the templates list select WPF Application or Silverlight Application. Enter a Name and click OK to create your project. The MainPage.xaml page will open.
Right-click the project in the Solution Explorer window and select Add Reference.
In the Add Reference dialog box, locate and select the C1.WPF.dll or C1.Silverlight.dll and C1.WPF.Tile.dll or C1.Silverlight.Tile.dll assemblies and click OK to add references to your project.

Add the XAML namespace to the Window (WPF) or UserControl (Silverlight) tag with the following markup:

xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"

This is a unified namespace that will enable you to work with most ComponentOne WPF and Silverlight controls without adding multiple namespaces. The Window or UserControl tag will now appear similar to the following:

WPF XAML	Copy Code
<Window xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="C1WPFTileCS022813.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525">

WPF XAML

Copy Code

<Window xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="C1WPFTileCS022813.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525">

Silverlight XAML	Copy Code
<UserControl xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="C1WPFTileCS022813.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525">

Silverlight XAML

Copy Code

<UserControl xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="C1WPFTileCS022813.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525">

Add the following markup just after the <Window> tag and before the <Grid> tag:

WPF XAML	Copy Code
<Window.Resources> <Style x:Key="listBoxItemStyle" TargetType="ListBoxItem"> <Setter Property="c1:C1TileService.PointerDownAnimation" Value="True"/> <Setter Property="Padding" Value="5" /> </Style> <Style TargetType="c1:C1Tile" x:Key="baseTileStyle"> <Setter Property="Background" Value="#FFC410" /> <Setter Property="Foreground" Value="White"/> <Setter Property="FontSize" Value="80"/> <Setter Property="HeaderForeground" Value="White"/> <Setter Property="HeaderFontSize" Value="12"/> <Setter Property="BorderThickness" Value="0" /> <Setter Property="Width" Value="280" /> <Setter Property="Height" Value="200" /> </Style> <Style TargetType="c1:C1Tile" BasedOn="{StaticResource baseTileStyle}"> </Style> <Style TargetType="c1:C1SlideTile" BasedOn="{StaticResource baseTileStyle}"> </Style> </Window.Resources>

WPF XAML

Copy Code

<Window.Resources>
    <Style x:Key="listBoxItemStyle" TargetType="ListBoxItem">
        <Setter Property="c1:C1TileService.PointerDownAnimation" Value="True"/>
            <Setter Property="Padding" Value="5" />
    </Style>
    <Style TargetType="c1:C1Tile" x:Key="baseTileStyle">
        <Setter Property="Background" Value="#FFC410" />
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontSize" Value="80"/>
        <Setter Property="HeaderForeground" Value="White"/>
        <Setter Property="HeaderFontSize" Value="12"/>
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Width" Value="280" />
        <Setter Property="Height" Value="200" />
    </Style>
    <Style TargetType="c1:C1Tile" BasedOn="{StaticResource baseTileStyle}">
    </Style>
    <Style TargetType="c1:C1SlideTile" BasedOn="{StaticResource baseTileStyle}">
    </Style>
</Window.Resources>

Silverlight XAML	Copy Code
<UserControl.Resources> <Style x:Key="listBoxItemStyle" TargetType="c1:C1ListBoxItem"> <Setter Property="c1:C1TileService.PointerDownAnimation" Value="True"/> </Style> <Style TargetType="c1:C1Tile" x:Key="baseTileStyle"> <Setter Property="Background" Value="#FFC410" /> <Setter Property="Foreground" Value="White"/> <Setter Property="FontSize" Value="80"/> <Setter Property="HeaderForeground" Value="White"/> <Setter Property="HeaderFontSize" Value="12"/> <Setter Property="BorderThickness" Value="0" /> <Setter Property="Width" Value="280" /> <Setter Property="Height" Value="200" /> </Style> <Style TargetType="c1:C1Tile" BasedOn="{StaticResource baseTileStyle}"> </Style> <Style TargetType="c1:C1SlideTile" BasedOn="{StaticResource baseTileStyle}"> </Style> <Style TargetType="c1:C1FlipTile" BasedOn="{StaticResource baseTileStyle}"> </Style> </UserControl.Resources>

Silverlight XAML

Copy Code

<UserControl.Resources>
        <Style x:Key="listBoxItemStyle" TargetType="c1:C1ListBoxItem">
            <Setter Property="c1:C1TileService.PointerDownAnimation" Value="True"/>
        </Style>
        <Style TargetType="c1:C1Tile" x:Key="baseTileStyle">
            <Setter Property="Background" Value="#FFC410" />
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="80"/>
            <Setter Property="HeaderForeground" Value="White"/>
            <Setter Property="HeaderFontSize" Value="12"/>
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Width" Value="280" />
            <Setter Property="Height" Value="200" />
        </Style>
        <Style TargetType="c1:C1Tile" BasedOn="{StaticResource baseTileStyle}">
        </Style>
        <Style TargetType="c1:C1SlideTile" BasedOn="{StaticResource baseTileStyle}">
        </Style>
        <Style TargetType="c1:C1FlipTile" BasedOn="{StaticResource baseTileStyle}">
        </Style>
    </UserControl.Resources>

This markup adds resources to style the appearance of the application.

Place the cursor between the <Grid> and </Grid> tags, navigate to the Toolbox, and double-click the ListBox control to add it to the page.

Update the ListBox markup so it looks like the following:

XAML	Copy Code
<ListBox ItemContainerStyle="{StaticResource listBoxItemStyle}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" > <ListBox.ItemsPanel> <ItemsPanelTemplate> <c1:C1WrapPanel/> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBox.Items> </ListBox.Items> </ListBox>

XAML

Copy Code

<ListBox ItemContainerStyle="{StaticResource listBoxItemStyle}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
                    <c1:C1WrapPanel/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.Items>
    </ListBox.Items>
</ListBox>

In this step you created a WPF application. In the next step you'll add Tiles for WPF and Silverlight controls to the application.